<template>
	<div>
		<!-- 面包屑 -->
		<div>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">网页页面</el-breadcrumb-item>
				<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		
		
		
		<!-- 输入框 -->
		<div style="margin-top:10px;">
			<el-form :inline="true">
				<el-form-item label="商品名称:">
					<el-input  v-model="queryInfo.goodsName"  placeholder="请输入商品名称"></el-input>
				</el-form-item>
				
				<el-form-item label="所属门店:">
					<el-input  v-model="queryInfo.shopName"  placeholder="请输入所属门店"></el-input>
				</el-form-item>
		
				<el-form-item label="创建时间:">
					<el-date-picker  value-format="yyyy-MM-dd HH:mm:ss"    v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
		
		
				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>
			</el-form>
			
			
			
		</div>
		<!-- 搜索 -->
		<div style="margin-bottom:10px;">
			
			<samp>状态：</samp>
			<el-button-group >
			  <el-button >全部商品</el-button>
			  <el-button >上架中</el-button>
			  <el-button >已下架</el-button>
			</el-button-group>
			
			<el-button type="primary"  style="margin-left :10px;">新增驿站</el-button>
		</div>
		
		
		
		
		<!-- 表格展示数据 -->
		<div style="margin-top:10px;">
			<template>
				<el-table stripe :data="communityList" style="width: 100%" border
					:header-cell-style="{ backgroundColor:'#eee'}">
					<el-table-column prop="goodsId" label="商品ID">
					</el-table-column>
					<el-table-column prop="goodsPresentPrice" label="商品">
					</el-table-column>
					<el-table-column prop="goodsShopName" label="所属门店">
					</el-table-column>
					<el-table-column prop="goodsSalesVolume" label="销量">
					</el-table-column>
					<el-table-column prop="goodsName" label="预估价">
					</el-table-column>
					<el-table-column prop="addTime" label="发布时间">
					</el-table-column>
					<el-table-column prop="shopPassword" label="状态">
						<el-button type="text">上架中</el-button>
					</el-table-column>
					<el-table-column label="操作">
						<el-button type="text">已下架</el-button>
						
					</el-table-column>
				</el-table>
			</template>
		</div>
		
		
		
		<!-- 分页 -->
		<div style="margin-top:10px;">
			<!-- current-page：要访问的页码
			page-sizes：可选择的每页展示的条数
			page-size：每页展示的条数
			total：数据总条数
			@size-change：当选择页码时触发的事件
			@current-change:当每页展示的条数发生改变时，触发的函数
			 -->
			<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="100"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		
		
		
		
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 查询信息对象
				queryInfo: { //模糊查询中的所有的数据参数
					
					goodsName: '', // 商品名称
					shopName:'',//所属门店
					startTime: '', // 开始时间
					endTime: '', // 结束时间
					pageNum: 1, // 页码
					pageSize: 10 ,// 每页展示条数
				},
				total: 5, //数据总条数
				date: '',
				communityList: []
			}
		},
		methods: {
			handleSizeChange(val) {
				//console.log(`每页$ {val}条`);
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum=1;
				this.queryCommunityList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页： $ {val}`);
				this.queryInfo.pageNum = val;
				this.queryCommunityList()
			},
			//查询所有的小区信息函数
			queryCommunityList() {
				this.$http.get('goods/querySearchShopGoodsList', {
						params: this.queryInfo
					})
					
					.then(res => {
						//console.log(res.data)
						if (res.data.status == 200) {
							//console.log(res.data.data.list)
							this.communityList = res.data.data.list
							//动态赋予数据总条数
							this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常！')
					})
			}
		},
		mounted() { //钩子函数--页面加载后直接执行的代码块
			this.queryCommunityList()
		}
	}
</script>

<style>
</style>